<template>
  <div class="container">
    <!--头部-->
    <div class="header box">
      <input type="text" placeholder="OPPO A3" />
      <b>登录</b>
    </div>
    <!--内容区域-->
    <div class="content box">
      <div class="top">
        <img src="../img/1.jpg" alt="" />
      </div>
      <div class="bottom">
        <dl>
          <dt>
            <img src="../img/2.jpg" alt="" />
          </dt>
          <dd>手机</dd>
        </dl>
        <dl>
          <dt>
            <img src="../img/3.jpg" alt="" />
          </dt>
          <dd>手机</dd>
        </dl>

        <dl>
          <dt>
            <img src="../img/2.jpg" alt="" />
          </dt>
          <dd>手机</dd>
        </dl>

        <dl>
          <dt>
            <img src="../img/3.jpg" alt="" />
          </dt>
          <dd>手机</dd>
        </dl>

        <dl>
          <dt>
            <img src="../img/2.jpg" alt="" />
          </dt>
          <dd>手机</dd>
        </dl>
      </div>

      <!--内容2-->
      <div class="content2">
        <div class="top2">
          <img src="../img/4.jpg" alt="" />
        </div>
        <ul class="tag">
          <li>配置套餐至高立减200元 |</li>
          <li>6起反馈 |</li>
          <li>阿帆看就看佛开了房</li>
        </ul>
        <div class="phone">
          <h3>手机专区</h3>
          <img src="../img/5.jpg" alt="" />
        </div>
      </div>
    </div>

    <!--低部-->
    <div class="footer">
      <dl>
        <dt>
          <img src="../img/6.jpg" alt="">

        </dt>
        <dd>
            首页
        </dd>
      </dl>
      <dl>
        <dt>
          <img src="../img/7.jpg" alt="">

        </dt>
        <dd>
            分类
        </dd>
      </dl>

      <dl>
        <dt>
          <img src="../img/8.jpg" alt="">

        </dt>
        <dd>
            购物车
        </dd>
      </dl>

      <dl>
        <dt>
          <img src="../img/9.jpg" alt="">

        </dt>
        <dd>
            我的
        </dd>
      </dl>
    </div>
  </div>
  
</template>

<style lang="scss" >
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html,
body,
#app,
.container {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  background: #efefef;
  .box {
    padding: 0.625rem 0.125rem;
    background: #fff;
    margin-bottom: 5px;
  }

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    .top {
      img {
        width: 100%;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      dl {
        width: 6.25rem;
        padding: 5px;
        margin: 5px;
        img {
          width: 50px;
        }
        dd {
          margin: 5px;
        }
      }
    }

    .content2 {
      .top2 {
        img {
          width: 100%;
          margin-bottom: 0.25rem;
        }
      }
      .tag {
        display: flex;
        justify-content: space-between;
        li {
          font-size: 13px;
          margin-left: 3px;
        }
      }

      .phone {
        margin-top: 20px;
        h3 {
          line-height: 2.5rem;
        }
        img {
          width: 100%;
        }
      }
    }
  }
  .footer {
    background: #fff;
      display: flex;
      justify-content: space-between;
    dl{
    
       width: 100px;
       float: left;
      margin-left: 10px;
    }
  dd{
    margin-left: .625rem;
  }
  }
}
</style>

